<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      canvas {
        background-color: rgba(255, 0, 0, 0.1);
      }
    </style>
  </head>
  <body>
    <canvas id="tutorial" width="300px" height="300px">
      浏览器不兼容canvas
    </canvas>
    <script>
      //  绘制图片

      // .绘制图片，可以使用 drawlmage 方法将它渲染到 canvas 里，drawlmage 方法有三种形态

      // 1.drawImage(image,x,y)
      // .其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标

      // 2.drawImage(image,x,y,width,height)
      // .多出的宽高控制画入 canvas 时，应该缩小的大小

      // 3.drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)
      // .前四个和上面一样，后四个定义裁剪的目标显示位置和大小

      // 图片来源，canvas 的 api 可以使用下面这些类型中的一种作为图片的源：

      // 1.HTMLImageElement:这些图片是由 image()函数构造出来的，或任何<img>元素

      // 2.HTMLVideoElement：用一个 HTML 的<video>元素作为你的图片源，可以从视频中抓取当前帧作为一个图像
      window.onload = function () {
        // 1.拿到canvas的元素对象
        let canvasEl = document.getElementById("tutorial");

        if (!canvasEl.getContext("2d")) {
          return;
        }
        // 2.拿到canvas渲染的上下文
        let ctx = canvasEl.getContext("2d"); //2d

        // 1.准备一张图片
        var image = new Image();
        image.src = "../img/OIP-C.jpg";
        image.onload = function () {
          // 2.开始用canvas绘制图片
          ctx.drawImage(image, 0, 0, 287, 180);

          // 画再图像上面,就要写在后面
          // 3.绘制折线
          ctx.beginPath();
          ctx.moveTo(40, 100);
          ctx.lineTo(50, 70);
          ctx.lineTo(60, 90);
          ctx.lineTo(100, 30);
          ctx.lineTo(170, 30);
          ctx.stroke();
        };
      };
    </script>
  </body>
</html>
